

var win = $(window);
var itemWidth = 200;
var gap = 10;
var itemOuterWidth = itemWidth + gap;
// var columes = getColums();
var columes = 2;
var leftArray = [];
var topArray = [];
var el = $('#ci-waterfall');
var items = [];
var isLoading = false;
var page = 0;
var maxPage = 3;
var timer = null;

initSize();
initPage();

win.on('scroll', function (evt) {
    if (win.scrollTop() + win.innerHeight() > topArray[getMinIndex()] * 0.8) {
        initPage();
    }
});

win.on('resize', function (evt) {
    if (timer) {
        clearTimeout(timer);
    }

    timer = setTimeout(function () {
        initSize();
        for (var i = 0; i < items.length; i++) {
            var item = $(items[i]);
            var index = getMinIndex();
            var itemHeight = itemWidth / items[i].size.width * items[i].size.height;
            console.log('itemHeight',  itemHeight);
            item.animate({
                width: itemWidth,
                height: itemHeight,
                left: leftArray[index],
                top: topArray[index]
            });
            topArray[index] += itemHeight + gap;
        }
    }, 500);
});

function getColums () {
    var count = Math.floor(win.width() / itemOuterWidth);
    count = (count < 2) ? 2 : count;
    count = (count > 6) ? 6 : count;
    return count;
}

function getWidth () {
    return itemOuterWidth * columes - gap;
}

function initSize () {
    var windowWidth = win.innerWidth();
    if (windowWidth <= 640) {
        columes = 2;
        gap = 5;
    } else if (windowWidth <= 960) {
        columes = 4;
        gap = 10;
    } else {
        columes = 6
        gap = 10;
    }
    // itemWidth = parseInt((windowWidth - gap * (columes + 1)) / columes);
    // itemOuterWidth = itemWidth + gap;
    itemOuterWidth = parseInt((windowWidth - gap) / columes);
    itemWidth = itemOuterWidth - gap;
    width = itemOuterWidth * columes - gap;
    el.css('width', width);
    console.log(itemWidth, gap, itemOuterWidth, columes);

    leftArray = [];
    topArray = [];
    for (var i = 0; i < columes; i++) {
        leftArray.push(itemOuterWidth * i);
        topArray.push(0);
    }
}

function initPage () {
    if (isLoading) {
        return;
    }
    getData({ page: page }, function (data) {
        page++;
        if (page > maxPage) {}
        for (var i = 0; i < data.length; i++) {
            var index = getMinIndex();
            // console.log(index, leftArray[index], topArray[index]);
            var itemHeight = itemWidth / data[i].width * data[i].height;
            var img = $('<img class="item" />');
            img.attr('src', data[i].preview);
            img.size = { width: data[i].width, height: data[i].height };
            img.css({
                width: itemWidth,
                height: itemHeight,
                left: leftArray[index],
                top: topArray[index]
            });
            img.appendTo(el);
            items.push(img);

            topArray[index] += itemHeight + gap;
        }
    });
}

function getData (params, callback) {
    console.log('loading');
    var url = 'http://www.wookmark.com/api/json/popular';
    isLoading = true;
    $.ajax({
        url: url,
        data: params,
        dataType: 'jsonp',
        success: function (res) {
            if ('function' == typeof callback) {
                isLoading = false;
                callback(res);
            }
        }
    });
}

function getMinIndex() {
    var index = 0;
    var top = topArray[0];
    for (var i = 0; i < columes; i++) {
        if (topArray[i] < top) {
            top = topArray[i];
            index = i;
        }
    }
    return index;
}
